<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="paylist-pop"
    width="900px"
    top="0"
    :show-close="false"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <i class="el-icon-circle-close" @click="closePop"></i>
    <div class="pop-title">Token消耗记录</div>
    <div class="pop-table">
      <el-row class="table-item" :gutter="20">
        <el-col :span="8">使用时间</el-col>
        <el-col :span="8">使用功能</el-col>
        <el-col :span="8">消费token数</el-col>
      </el-row>
      <div v-if="payList.length > 0" class="pop-tbody">
        <!-- <el-row class="table-item" :gutter="20">
          <el-col :span="4">2020/03/12</el-col>
          <el-col :span="5">微信</el-col>
          <el-col :span="5">100</el-col>
          <el-col :span="7">啊的大幅答复的噶啊</el-col>
        </el-row> -->
        <el-row
          v-for="item in payList"
          :key="item.id"
          class="table-item"
          :gutter="20"
        >
          <el-col :span="8">{{ item.createdate | dateTimeRender }}</el-col>
          <el-col :span="8">{{ item.type_label || ' ' }}</el-col>
          <el-col :span="8">{{ item.costtokens }}</el-col>
        </el-row>
      </div>
      <div v-else class="empty">
        <svg
          width="64"
          height="41"
          viewBox="0 0 64 41"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
            <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
            <g fill-rule="nonzero" stroke="#d9d9d9">
              <path
                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
              ></path>
              <path
                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                fill="#fafafa"
              ></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <div class="history-tips">
      <div class="tip-row">
        ▪&nbsp;&nbsp;&nbsp;学术会员购买成功后立即生效，权益额度仅限有效期内使用，过期将清零，请及时使用。
      </div>
      <div class="tip-row">
        ▪&nbsp;&nbsp;&nbsp;学术会员仅限在学术专区使用，与对话/绘画会员无关。
      </div>
      <div class="tip-row">
        ▪&nbsp;&nbsp;&nbsp;购买多个学术会员时，最多同时生效一个；如果会员权益等级不同，优先生效权益更高的会员；如果会员权益等级相同，优先生效临近到期的会员，剩余学术会员顺延有效期。
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getTokenList } from "@/api/api";
import { fetchData } from "@/utils";

export default {
  name: "PaylistPop",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      payList: [],
    };
  },
  watch: {
    show: function (newVal) {
      this.visible = newVal;
      if(newVal) {
        this.getPayList();
      }
    },
  },
  methods: {
    getPayList() {
      fetchData(getTokenList).then((res) => {
        this.payList = res.list;
      });
    },
    closePop() {
      this.$emit("update:show", false);
    },
  },
};
</script>

<style lang="less">
.paylist-pop {
  top: 50%;
  transform: translateY(-50%);
  padding: 0 40px 40px;
  background: linear-gradient(134deg, #17130c 0%, #171719 100%);
  border-radius: 16px;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-icon-circle-close {
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 28px;
    color: #999999;
  }
  .pop-title {
    height: 58px;
    line-height: 58px;
    font-size: 15px;
    font-family: "\82f9\65b9-\7b80-\5e38\89c4\4f53, \82f9\65b9-\7b80";
    font-weight: 400;
    color: #f9c762;
    cursor: pointer;
    text-align: center;
  }
  .pop-table {
    font-size: 13px;
    font-weight: 400;
    color: #fafafa;
    text-align: center;
    .table-item {
      margin-bottom: 20px;
    }
    .pop-tbody {
      width: 100%;
      height: 338px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .empty {
      height: 250px;
      padding-top: 50px;
      text-align: center;
      svg {
        width: 64px;
        height: 40px;
      }
    }
  }
  .history-tips {
    background: rgba(62, 55, 44, 0.3);
    border-radius: 8px;
    padding: 16px 26px;
    margin-top: 40px;
    gap: 70px;
    .tip-row {
      font-size: 13px;
      font-family: "\82f9\65b9-\7b80-\5e38\89c4\4f53, \82f9\65b9-\7b80";
      font-weight: 400;
      color: #ccc;
      line-height: 20px;
    }
  }
}
</style>
